<template>
    <div id="killSecond">
        <div class="header">
            <ul >
                <li :style="num1" @click="tab" >{{title}}</li>
                <li :style="num2" @click="Soon" >即将开抢</li>
                <li :style="num3" @click="Preview" >更多预告</li>
            </ul>
        </div>
        <!-------正在疯抢-------->
        <div class='one'>
            <div class="rob">
                <p class="p1">{{stateInfo.startTime}}正在疯抢</p>
                <p class="p2">距结束 <span>{{timeCount|dateFrm}}</span></p>
            </div>
            <div class="list" v-for="(item,index) in proList">
                <img :src="item.pro_image" alt="" class="pic1" @click="goNewDetails(item.pro_id,item.id_type)">
                <div class="beright">
                    <p class="berightP" :style="test">{{item.pro_title}}</p>
                    <!--进度条-->
                    <div class="a" v-if="Speed">
                        <div class="b" :style="newWidth"></div>
                        <span class="plan">已售{{Number(item.pro_sells)/Number(item.pro_stock)*100}}%</span>
                    </div>
                    <span :style="newPosi">仅剩{{item.pro_stock}}件</span>
                    <p class="bebottom" :style="newHeight">
                        ￥{{item.now_price}}<span>￥{{item.market_price}}</span>
                        <span class="grab" @click="goOrder(item)">{{conText}}</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import config from "../config/config.js";
    export default {
        data(){
            return{
              num:0,
              arr:["正在疯抢","即将开抢","更多预告"],
              proList:'',
              stateInfo:'',
              timeCount:null,
              isOnline:'',
              num1:"",
              num2:"",
              num3:'',
              conText:'',
              title:'',
              test:'-webkit-box-orient: vertical;',
              Speed:true,
              newPosi:'',
              newHeight:'',
              newWidth:'',
              pro_title:''
            }
        },
      filters:{
        dateFrm:function(time){
          return formatSeconds(time)
        }
      },
        methods:{
          tab(){
            if(this.isOnline==1){
              this.num1 = 'background:#ff464e;';
              this.num2 = '';
              this.num3 = '';
              this.GetSecKill();
            }else{
              return false;
            }
          },
          Soon(){
            this.num1 = '';
            this.num2 = 'background:#ff464e;';
            this.num3 = '';
            this.GetTwo();
          },
          Preview(){
            this.num1 = '';
            this.num2 = '';
            this.num3 = 'background:#ff464e;';
            this.GetThree();
          },
          Countdown(){
            var _self=this;
            if(_self.timeCount==0){
              _self.timeCount=0;
              clearInterval(_self.timerLoad);
            }else{
              clearInterval(_self.timerLoad);
              _self.timerLoad=setInterval(function(){
                _self.timeCount--;
              },1000)
            }
          },
          goOrder(item){
            if(this.conText=='马上抢'){
              this.$router.push({path:'/newOrder',query:{
                  path:'/newOrder',
                  query:{
                    // 'title':item.pro_title,
                    // 'iscut':1,
                    // 'type':1,
                  }
                }})
            }else{
              return false;
            }
          },
          goNewDetails(id,type){
            this.$router.push('/newDetail/'+id+'/'+type);
          },
          GetSecKill(){
            var that = this;
            var value=JSON.stringify({"type":"1"}),
              key=demo(value);
            axios.post('/Home/home/SecKill',{
              value:value,
              key:key
            },config)
              .then(function(res) {
                if(res.data.code==200){
                  this.proList=res.data.data.proList;
                  this.stateInfo = res.data.data.stateInfo;
                  this.timeCount=res.data.data.stateInfo.endTime;
                  this.$nextTick(function () {
                    that.Countdown();
                  });
                  this.isOnline=res.data.data.stateInfo.isOnline;
                  this.num1 = 'background:#ff464e;';
                  this.newPosi = 'position: absolute;top: 1.18rem;left: 3rem;color: #ff464e;';
                  this.test = '';
                  this.newHeight = '';
                  this.conText = '马上抢';
                  this.title = '正在疯抢';
                  this.Speed = true;
                  if(this.isOnline==2){
                    this.title = '已结束';
                    that.GetTwo();
                  }
                }
              }.bind(this))
              .catch(function (error) {
                console.log(error);
              });
          },
          GetTwo(){
            var that = this;
            var value=JSON.stringify({"type":"2"}),
              key=demo(value);
            axios.post('/Home/home/SecKill',{
              value:value,
              key:key
            },config)
              .then(function(res) {
                if(res.data.code==200){
                  this.proList=res.data.data.proList;
                  this.stateInfo = res.data.data.stateInfo;
                  this.timeCount=res.data.data.stateInfo.endTime;
                  this.isOnline=res.data.data.stateInfo.isOnline;

                  this.conText = '未开抢';
                  this.num1 = '';
                  this.num2 = 'background:#ff464e;';
                  this.test = 'padding-bottom:.12rem;';
                  this.newHeight = 'margin-top:1rem';
                  this.newPosi = 'position: absolute;top: 1.18rem;left: 0;color: #ff464e;';
                  this.Speed = false;
                }
              }.bind(this))
              .catch(function (error) {
                console.log(error);
              });
          },
          GetThree(){
            var value=JSON.stringify({"type":"1"}),
              key=demo(value);
            axios.post('/Home/home/SecKill',{
              value:value,
              key:key
            },config)
              .then(function(res) {
                if(res.data.code==200){
                  this.proList=res.data.data.proList;
                  this.stateInfo = res.data.data.stateInfo;
                  this.timeCount=res.data.data.stateInfo.endTime;
                  this.isOnline=res.data.data.stateInfo.isOnline;
                  this.conText = '未开抢';
                  this.Speed = false;
                  this.test = 'padding-bottom:.12rem;';
                  this.newHeight = 'margin-top:1rem';
                  this.newPosi = 'position: absolute;top: 1.18rem;left: 0;color: #ff464e;';
                }
              }.bind(this))
              .catch(function (error) {
                console.log(error);
              });
          },
        },
      created(){
        this.GetSecKill();
      },
      deactivated () {
        this.$destroy(true)
      }
    }
</script>

<style>

</style>
